<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>账单列表</title>
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<script src="js/vue.js"></script>
	<script src="element-ui/lib/index.js"></script>
	<script src="js/axios-0.18.0.js"></script>
	<script src="js/server.js"></script>
</head>
<body>
<div id="div">
	<!-- 查询条件区域 -->
	<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
		<el-form-item label="账单编码">
			<el-input v-model="searchFrom.billCode"></el-input>
		</el-form-item>
		<el-form-item label="商品名称">
			<el-input v-model="searchFrom.productName"></el-input>
		</el-form-item>
		<el-form-item label="供应商" prop="providerId">
			<el-select v-model="searchFrom.providerId" placeholder="请选择" >
				<el-option
						v-for="item in providerList"
						:key="item.id"
						:label="item.proName"
						:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="支付状态">
			<el-select v-model="searchFrom.isPayment" placeholder="请选择">
				<el-option label="未支付" value="1"></el-option>
				<el-option label="已支付" value="2"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="doSearch">查询</el-button>
		</el-form-item>
	</el-form>

	<!-- 表格列表 -->
	<template>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="index" label="序号" width="50"></el-table-column>
			<el-table-column prop="billCode" label="账单编码" width="120"></el-table-column>
			<el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
			<el-table-column prop="proName" label="供应商名称" width="180"></el-table-column>
			<el-table-column prop="totalPrice" label="商品总额"></el-table-column>
			<el-table-column prop="isPayment" label="是否支付" :formatter="isPaymentParse"></el-table-column>
			<el-table-column prop="creationDate" label="创建时间"></el-table-column>
			<el-table-column label="操作" width="220">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleShow(scope.row)">查看</el-button>
					<el-button size="mini" v-if="scope.row.isPayment===1" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" v-if="scope.row.isPayment===1" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</template>

	<!-- 分页条 -->
	<div class="block">
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pagination.currentPage"
				:page-sizes="[3, 5, 10]"
				:page-size="pagination.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total">
		</el-pagination>
	</div>


	<!-- 查看对话框 -->
	<el-dialog title="查看账单信息" :visible.sync="showFormVisible">
		<el-form :model="showForm">
			<el-form-item label="账单编码" :label-width="formLabelWidth">
				<el-input autocomplete="off" disabled v-model="showForm.billCode"></el-input>
			</el-form-item>
			<el-form-item label="商品名称" :label-width="formLabelWidth">
				<el-input autocomplete="off" disabled v-model="showForm.productName"></el-input>
			</el-form-item>
			<el-form-item label="商品描述" :label-width="formLabelWidth">
				<el-input type="textarea" autocomplete="off" disabled v-model="showForm.productDesc"></el-input>
			</el-form-item>
			<el-form-item label="商品数量" :label-width="formLabelWidth">
				<el-input autocomplete="off" disabled v-model="showForm.productCount"></el-input>
			</el-form-item>
			<el-form-item label="商品单位" :label-width="formLabelWidth">
				<el-input autocomplete="off" disabled v-model="showForm.productUnit"></el-input>
			</el-form-item>
			<el-form-item label="商品总额" :label-width="formLabelWidth">
				<el-input autocomplete="off" disabled v-model="showForm.totalPrice"></el-input>
			</el-form-item>
			<el-form-item label="是否支付" :label-width="formLabelWidth">
				<el-input v-model="showForm.isPayment" autocomplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="创建时间" :label-width="formLabelWidth">
				<el-input autocomplete="off" disabled v-model="showForm.creationDate"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="showFormVisible = false">关闭</el-button>
		</div>
	</el-dialog>

	<!-- 编辑对话框 -->
	<el-dialog title="编辑账单信息" :visible.sync="editFormVisible">
		<el-form :model="editForm" :rules="rules" ref="editForm" >
			<el-form-item label="账单编码" prop="billCode" :label-width="formLabelWidth">
				<el-input v-model="editForm.billCode" disabled ></el-input>
			</el-form-item>
			<el-form-item label="商品名称" prop="productName" :label-width="formLabelWidth">
				<el-input v-model="editForm.productName"></el-input>
			</el-form-item>
			<el-form-item label="商品描述" prop="productDesc" :label-width="formLabelWidth">
				<el-input type="textarea" v-model="editForm.productDesc"></el-input>
			</el-form-item>
			<el-form-item label="商品数量" prop="productCount" :label-width="formLabelWidth">
				<el-input v-model="editForm.productCount"></el-input>
			</el-form-item>
			<el-form-item label="商品单位" prop="productUnit" :label-width="formLabelWidth">
				<el-select v-model="editForm.productUnit" placeholder="请选择" >
					<el-option
							v-for="item in productUnitList"
							:key="item"
							:label="item"
							:value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品总额" prop="totalPrice" :label-width="formLabelWidth">
				<el-input v-model="editForm.totalPrice"></el-input>
			</el-form-item>
			<el-form-item label="是否支付" prop="isPayment" :label-width="formLabelWidth">
				<el-radio v-model="editForm.isPayment" :label="1" >未支付</el-radio>
				<el-radio v-model="editForm.isPayment" :label="2" >已支付</el-radio>
			</el-form-item>
			<el-form-item label="供应商" prop="providerId" :label-width="formLabelWidth">
				<el-select v-model="editForm.providerId" placeholder="请选择" >
					<el-option
							v-for="item in providerList"
							:key="item.id"
							:label="item.proName"
							:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="editFormVisible = false">取消</el-button>
			<el-button type="primary" @click="doUpdate('editForm')">确定</el-button>
		</div>
	</el-dialog>

</div>
</body>
<script type="application/javascript">
	new Vue({
		el: '#div',
		data: {
			// 查询条件（新增支付状态筛选，与后端接口匹配）
			searchFrom: {
				billCode: "",
				productName: "",
				providerId: "",
				isPayment: ""  // 新增：支付状态筛选
			},
			productUnitList: ['瓶', '块', '斤', '袋', '个'],
			providerList: [], // 供应商列表

			// 表格数据
			tableData: [],

			// 分页参数
			pagination: {
				currentPage: 1,
				pageSize: 3,
				total: 0
			},

			// 查看表单
			showFormVisible: false,
			showForm: {
				billCode: "",
				productName: "",
				productDesc: "",
				productCount: "",
				productUnit: "",
				totalPrice: "",
				isPayment: "",
				creationDate: ""
			},
			formLabelWidth: '120px',

			// 编辑表单
			editFormVisible: false,
			editForm: {
				productUnit: '瓶',
				isPayment: 1,
				providerId: 1
			},
			rules: {
				billCode: [{
					required: true,
					message: '请输入账单编码',
					trigger: 'blur'
				}],
				productName: [{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}]
			}
		},
		methods: {
			// 查询
			doSearch() {
				this.pagination.currentPage = 1;
				this.doList();
			},

			// 查看账单详情（与后端@GetMapping("/{id}")匹配）
			handleShow(row) {
				this.showFormVisible = true;
				axios.get(`${server_url}/api/bill/${row.id}`)
						.then(resp => {
							if (resp.data.code === 0) {
								const bill = resp.data.data;
								this.showForm = {
									...bill,
									isPayment: bill.isPayment === 1 ? "未支付" : "已支付"
								};
							}
						}).catch(err => console.error("查看账单失败：", err));
			},

			// 编辑账单
			handleEdit(row) {
				this.editFormVisible = true;
				this.editForm = {...row}; // 深拷贝避免双向绑定问题
			},

			// 删除账单（与后端@DeleteMapping("/{id}")匹配）
			handleDelete(row) {
				this.$confirm(
						'此操作将永久删除该数据, 是否继续?',
						'提示',
						{confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}
				).then(() => {
					axios.delete(`${server_url}/api/bill/${row.id}`)
							.then(resp => {
								if (resp.data.code === 0) {
									this.$message.success(resp.data.msg);
									this.doList(); // 刷新列表
								} else {
									this.$message.error(resp.data.msg);
								}
							}).catch(err => console.error("删除账单失败：", err));
				});
			},

			// 分页尺寸变更
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.doList();
			},

			// 当前页变更
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.doList();
			},

			// 解析支付状态
			isPaymentParse(row, column, cellValue) {
				return cellValue === 1 ? "未支付" : "已支付";
			},

			// 加载供应商列表
			doAllProviders() {
				axios.get(server_url + "/api/provider")
						.then(resp => {
							if (resp.data.code === 0) {
								this.providerList = resp.data.data;
							}
						}).catch(err => console.error("加载供应商列表失败：", err));
			},

			// 加载账单列表（与后端@GetMapping("/list")匹配）
			doList() {
				// GET请求，参数通过params传递
				axios.get(`${server_url}/api/bill/list`, {
					params: {
						currentPage: this.pagination.currentPage,
						pageSize: this.pagination.pageSize,
						productName: this.searchFrom.productName,
						providerId: this.searchFrom.providerId,
						isPayment: this.searchFrom.isPayment,
						billCode: this.searchFrom.billCode  // 新增：支持账单编码查询
					}
				}).then(resp => {
					if (resp.data.code === 0) {
						const pageResult = resp.data.data;
						this.tableData = pageResult.list;
						this.pagination.total = pageResult.totalCount; // 与后端PageResult的totalCount字段匹配
					}
				}).catch(err => console.error("加载账单列表失败：", err));
			},

			// 更新账单（与后端@PutMapping匹配）
			doUpdate(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.put(
								`${server_url}/api/bill`,
								this.editForm, // JSON格式提交
								{
									headers: { 'Content-Type': 'application/json' }
								}
						).then(resp => {
							if (resp.data.code === 0) {
								this.editFormVisible = false;
								this.$message.success(resp.data.msg);
								this.doList(); // 刷新列表
							} else {
								this.$message.error(resp.data.msg);
							}
						}).catch(err => console.error("更新账单失败：", err));
					}
				});
			}

		},
		mounted: function() {
			// 页面加载时初始化数据
			this.doAllProviders();
			this.doList();
		}
	});
</script>
</html>